<template>
  <div>
    <div class="AccountDetails">
      <div class="detail_head_title">
        <div class="item">
          <em @click="$router.back()">
            <van-icon name="arrow-left" />
          </em>
          <p>明细</p>
          <div class="jiao_yi" @click="showModel = true">
            <span>交易类型</span>
            <span></span>
          </div>
        </div>

        <div class="item_date">
          <p @click="showPopup">
            {{ getTime(currentDate) }}
            <img src="../assets/imgs/mingxi_icon_more.png" alt="" />
          </p>
          <span v-if="info">支出￥{{info.extract}}</span>
          <span v-if="info">收入￥{{info.commission}}</span>
        </div>
      </div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          :immediate-check="false"
          v-model="loading"
          :finished="finished"
          loading-text="加载中..."
          finished-text="没有更多数据了~"
          @load="onLoad"
          style="background: #ffffff"
          :offset="0"
        >
          <ul>
            <!-- //一个 -->
            <li class="detail_lis" v-for="(item, index) in list" :key="index">
              <img :src="item.avatar | imageUrl" alt="" />
              <div class="detail_main">
                <div class="name">
                  <span>{{ item.nick }}</span>
                  <span>{{ getTimeView(item.createTime) }}</span>
                </div>
                <div
                  class="pre"
                  :class="item.type == 1 ? ' preColor' : ''"
                >
                  {{ item.type == 1 ? "+" + item.money : "-" + item.money }}
                </div>
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
      <van-popup v-model="show" get-container="body" round position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title="选择年月"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="cancel"
          @confirm="confirm"
        />
      </van-popup>
    </div>
    <div class="model" v-show="showModel">
      <div class="screen">
        <div class="select-list flex flex-between">
          <div
            class="select-item"
            :class="screen == -1 ? 'select-on' : ''"
            @click="screen = -1"
          >
            全部
          </div>
          <div
            class="select-item"
            :class="screen == 2 ? 'select-on' : ''"
            @click="screen = 2"
          >
            支出
          </div>
          <div
            class="select-item"
            :class="screen == 1 ? 'select-on' : ''"
            @click="screen = 1"
          >
            收入
          </div>
        </div>
        <div class="btn-list flex flex-between">
          <div class="cancel-btn" @click="showModel = false">取消</div>
          <div class="submit-btn" @click="submit">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate1, formatDate2, formatDate3 } from "@/utils/filters";
export default {
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      show: false,
      showModel: false,
      screen: -1,
      list: [],
      pageNumber: 1,
      pageSize: 10,
      loading: true,
      finished: false,
      isLoading: false,
      info:null
    };
  },
  created() {
    this.getVipUserRecord();
  },
  methods: {
    cancel() {
      this.show = false;
    },
    showPopup() {
      this.show = true;
    },
    getTime(time) {
      return formatDate3(time);
    },
    getTimeView(time) {
      return formatDate1(time);
    },
    //刷新
    onRefresh() {
      this.isLoading = true;
      this.list = [];
      this.pageNumber = 1;
      this.getVipUserRecord();
    },
    //分页
    onLoad() {
      this.loading = true;
      this.pageNumber += 1;
      this.getVipUserRecord();
    },
    //获取明细列表
    getVipUserRecord() {
      let _self = this;
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中",
      });
      this.$Api
        .getVipUserRecord({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          type: this.screen,
          month: formatDate2(this.currentDate),
          accountId:
            this.$route.query && this.$route.query.id
              ? this.$route.query.id
              : this.$store.state.userInfo
              ? this.$store.state.userInfo.id
              : "",
        })
        .then((res) => {
          _self.$toast.clear();
          _self.info = {
            extract:res.data.extract,
            commission:res.data.commission
          }
          _self.list = _self.list.concat(res.data.page.list);
          _self.finished = res.data.page.lastPage;
          _self.loading = false;
          _self.isLoading = false;
        });
    },
    //确定选择日期
    confirm() {
      this.list = [];
      this.pageNumber = 1;
      this.show = false;
      this.getVipUserRecord();
    },
    //确定筛选
    submit() {
      this.list = [];
      this.pageNumber = 1;
      this.showModel = false;
      this.getVipUserRecord();
    },
  },
};
</script>

<style scoped>
.model {
  width: 100%;
  height: calc(100vh - 88px);
  position: fixed;
  top: 88px;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.model .screen {
  width: 100%;
  background-color: #f8f8f8;
  padding: 39px 26px 23px 26px;
  box-sizing: border-box;
}
.model .screen .select-list {
  width: 100%;
  margin-bottom: 165px;
}
.model .screen .btn-list {
  width: 100%;
}
.model .screen .btn-list .cancel-btn,
.model .screen .btn-list .submit-btn {
  width: 326px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 30px;
  border-radius: 16px;
}
.model .screen .btn-list .cancel-btn {
  background-color: #eaeaea;
  color: #333333;
}
.model .screen .btn-list .submit-btn {
  background-color: #f8871b;
  color: #f8f8f8;
}
.model .screen .select-list .select-item {
  width: 210px;
  height: 74px;
  line-height: 74px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid #eaeaea;
  background-color: #eaeaea;
  color: #6e6e6e;
  font-size: 28px;
}
.model .screen .select-list .select-on {
  background-color: #fff6ed;
  color: #f8871b;
  border: 1px solid #f8871b;
}
/* 主体部分 */
.AccountDetails {
  min-height: 100vh;
}

/* 时间部分 */
.item_date {
  padding-left: 25px;
  padding-bottom: 43px;
}
.item_date img {
  width: 13px;
  height: 24px;
  margin-left: 24px;
}
.item_date p {
  display: block;
}
.item_date span {
  color: #bbb;
  font-size: 28px;
  font-weight: normal;
  margin-right: 4px;
}

/* 类表部分 */
.preColor {
  color: #ff9a22;
}
.detail_lis {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail_lis img {
  width: 84px;
  height: 84px;
  margin: 0 25px;
  border-radius: 50%;
}
.detail_lis .detail_main {
  border-bottom: 1px #e7e7e7 solid;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 24px 30px 0;
}
.detail_main .name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.detail_main .name span:last-child {
  color: #bbb;
  font-size: 26px;
  margin-top: 2px;
}

/* 头部CSS */
.detail_head_title {
  font-size: 175px;
  font-weight: bold;
  background: #f8f8f8;
}
.detail_head_title .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88px;
  padding: 0 25px;
}
.detail_head_title .item em {
  flex: 1;
}
.detail_head_title .item p {
  flex: 1;
  text-align: center;
}
.detail_head_title .item .jiao_yi {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.detail_head_title .item span {
  margin-right: 8px;
}
.detail_head_title .item span:last-child {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-width: 0 12px 18px 12px;
  border-color: transparent transparent #bbb transparent;
  border-style: solid;
  margin: 0;
}
</style>